<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">工作信息</h3>
      </div>
      <div class="box-body">
        <el-form :model="editResume" status-icon :rules="resumeRules" ref="editResume" label-width="100px">
          <div class="col-sm-6">
            <el-form-item label="开始时间" prop="startTime" :required="true">
              <MyDatePicker :editable="isEditable" v-bind:date="editResume.startTime" @timeChanged="(time)=>this.editResume.startTime =time">
              </MyDatePicker>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="离开时间" prop="leftTime">
              <MyDatePicker :editable="isEditable" v-bind:date="editResume.leftTime" @timeChanged="(time)=>this.editResume.leftTime =time">
              </MyDatePicker>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="工作单位(就读学校)" prop="company" :required="true">
              <el-input :disabled="!isEditable" v-model="editResume.company" placeholder="请输入工作单位" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="职位(专业)信息" prop="title" :required="true">
              <el-input :disabled="!isEditable" v-model="editResume.title" placeholder="请输入职位(专业)信息" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-12">
            <el-form-item label="备注">
              <el-input :disabled="!isEditable" type="textarea" :rows="2" v-model="editResume.comment" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from './MyDatePicker'
  export default {
    name: 'Resume',
    props: ['resume', 'editable'],
    data(router) {
      return {
        defaultValue: new Date(),
        pickerOptions0: {
          disabledDate(time) {
            return false;
          },
          month: 1
        },
        editResume: {
          startTime: "",
          leftTime: "",
          company: "",
          title: ""
        },
        isEditable: true,
        resumeRules: {
          startTime: [{
            required: true,
            message: '请输入加入时间',
            trigger: 'change'
          }],
          // leftTime: [{
          //   required: true,
          //   message: '请输入离开时间',
          //   trigger: 'change'
          // }],
          company: [{
            required: true,
            message: '请输入工作单位(就读学校)信息',
            trigger: 'blur'
          }],
          title: [{
            required: true,
            message: '请输入职位(专业)信息',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      if (this.resume) {
        this.editResume = this.resume
      }
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
    },
    components: {
      MyDatePicker
    },
    methods: {
      getResume: function() {
        var validRes = true
        this.$refs.editResume.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('error submit!!');
            validRes = false
            return false;
          }
        });
        console.log(" editResume:", JSON.stringify(this.editResume));
        if (!validRes) {
          return null
        }
        return this.editResume;
      }
    }
  }
</script>

